<template>
    <div>
        <div class="top">
            <img src="../../static/img/zuo.png" alt="" class="img_fo fdj" @click="$router.push('/denglu')">
            <img src="https://img02.camel.com.cn/image/you_logo_20171109.jpg" alt="" class="logo">
            <img src="../../static/img/message.png" alt="" class="img_fo fenxiang">
        </div>
        <div class="content_wp">
            <form v-model="form">
                <div style="position:relative;">
                    <input type="text" class="ipt" placeholder="用户名/手机号/邮箱" @blur="phoneNum()" v-model="form.userName">
                    <p v-if="bloos" class="errors">请输入正确的手机号</p>
                    <p v-if="bs" class="errors">手机号已被注册</p>
                    <div class="cha_wp">
                        <img src="../../static/img/cha.png" alt="" class="cha" @click="form.userName=''">
                    </div>
                </div>
                <div style="position:relative;">
                    <input type="password" class="ipt" placeholder="密码" @blur="passWord()" v-model="form.password">
                    <p v-if="bloo" class="errors">密码长度6-16，包括字母、数字、下划线</p>
                    <div class="cha_wp">
                        <img src="../../static/img/cha.png" alt="" class="cha" @click="form.password=''">
                    </div>
                </div>
                <div style="position:relative;">
                    <input type="password" class="ipt" placeholder="密码" @blur="panduan()" v-model="twoPW">
                    <p v-if="blssa" class="errors">请输入密码</p>
                    <p v-if="blss" class="errors">两次密码输入不一样</p>
                    <div class="cha_wp">
                        <img src="../../static/img/cha.png" alt="" class="cha" @click="twoPW=''">
                    </div>
                </div>
                <div class="get_wp">
                    <div style="position:relative;">
                        <input type="text" class="ipts" v-model="numbers" placeholder="验证码">
                        <p v-if="four" class="errors">验证码错误</p>
                        <div class="cha_wp">
                            <img src="../../static/img/cha.png" alt="" class="cha">
                        </div>
                    </div>
                    <div style="display:flex;align-items:flex-end;flex:1">
                        <button class="getma" :disabled=blos @click="getVerificationCode()">{{times}}</button>
                    </div>
                </div>
                <button class="login_btn" @click="zhuce()">注册</button>
            </form>
            <p class="fanhui" @click="$router.push('/denglu')">返回登录</p>
        </div>
    </div>
</template>

<script>
import axios from "axios";
import qs from "qs";
export default {
    data() {
        return {
            form: {
                userName: "",
                password: ""
            },
            twoPW: "",
            yanzhengma: undefined,
            bloos: false,
            bloo: false,
            blss: false,
            blssa: false,
            times: "获取验证码",
            blos: false,
            numbers: "",
            four: false,
            bs: false
        };
    },
    methods: {
        panduan() {
            if (this.twoPW == "") {
                this.blssa = true;
                return false;
            } else {
                this.blssa = false;
            }
            if (this.twoPW != this.form.password) {
                this.blss = true;
                return false;
            } else {
                this.blss = false;
            }
            if (this.blssa) {
                this.blss = false;
            } else if (this.blss) {
                this.blssa = false;
            }
        },
        phoneNum() {
            const reg = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
            if (this.form.userName == "" || !reg.test(this.form.userName)) {
                this.bloos = true;
                return false;
            } else {
                this.bloos = false;
                axios({
                    url:
                        "http://localhost/api.php/camel/user?transform=1&filter=userName,eq," +
                        this.form.userName,
                    method: "get"
                }).then(res => {
                    console.log(res);
                    if (res.data.user.length > 0) {
                        var that = this;
                        that.bs = true;
                        setTimeout(() => {
                            that.bs = false;
                        }, 8000);
                        return false;
                    }
                });
            }
        },
        passWord() {
            const regPw = /^(\w){6,16}$/;
            if (this.form.password == "" || !regPw.test(this.form.password)) {
                this.bloo = true;
                return false;
            } else {
                this.bloo = false;
            }
        },
        getVerificationCode() {
            if (
                this.form.userName == "" ||
                this.form.password == "" ||
                this.twoPW == ""
            ) {
                return false;
            } else if (this.form.password != this.twoPW) {
                // console.log(2);
                return false;
            } else {
                // console.log(3);
                this.dingshiqi();
                var that = this;
                var time = new Date().getTime();

                time = time.toString();
                time = time.substring(time.length - 4);
                that.yanzhengma = time;
                sessionStorage.setItem("YZM", that.yanzhengma);

                axios({
                    url:
                        "http://v.juhe.cn/sms/send?mobile=" +
                        that.form.userName +
                        "&tpl_id=184694&tpl_value=%23code%23%3D" +
                        that.yanzhengma +
                        "&dtype=&key=307ac54c2d5cbf0ce1f56dda03179d1e",
                    method: "post"
                }).then(res => {
                    console.log(that.yanzhengma);
                });
            }
        },
        dingshiqi() {
            this.times = 60;
            this.blos = true;
            var timer = setInterval(() => {
                this.times--;
                if (this.times == 0) {
                    clearInterval(timer);
                    timer = null;
                    this.times = "获取验证码";
                    this.blos = false;
                }
            }, 1000);
        },
        zhuce() {
            if (this.numbers == this.yanzhengma) {
                var that = this;
                var time = new Date().getTime();
                time = time.toString();
                time = time.substring(time.length - 6);
                var name = "camel" + time;
                that.form.name = name;
                axios({
                    url: "http://localhost/api.php/camel/user",
                    method: "post",
                    data: qs.stringify(that.form)
                }).then(res => {
                    if (res.status == 200) {
                        sessionStorage.setItem('user',JSON.stringify(that.form))
                        that.$router.push("/denglu");
                    }
                });
            } else {
                this.four = true;
            }
        }
    }
};
</script>

<style>
.errors {
    color: red;
    font-size: 0.1rem;
    margin-top: 0;
}
.fanhui {
    font-size: 0.1rem;
    color: #999;
    margin-top: 0.106rem;
}
.get_wp {
    display: flex;
}
.login_btn {
    color: #a2821b;
    letter-spacing: 3px;
    border: 1px solid #c3a851;
    text-align: center;
    border-radius: 3px;
    /* width: 2.843rem; */
    width: 100%;
    height: 0.398rem;
    margin-top: 0.16rem;
    background-color: #fff;
    font-size: 0.12rem;
    outline: none;
}
.cha {
    height: 0.141rem;
    width: 0.141rem;
}
.cha_wp {
    height: 0.141rem;
    width: 0.141rem;
    background-color: #d9d9d9;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    right: 0.1rem;
    transform: translateY(-50%);
}
.ipts {
    height: 0.398rem;
    width: 2.07rem;
    border-radius: 5px;
    border: none;
    border-bottom: 1px solid #d9d9d9;
    font-size: 0.13rem;
    outline: none;
}
.getma {
    background-color: #c3a851;
    height: 0.353rem;
    border: 0;
    outline: none;
    width: 100%;
    color: #fff;
    border-radius: 5px;
}
.content_wp {
    padding: 0.3rem 0.13rem 0.13rem 0.13rem;
    height: 100%;
}
.ipt {
    /* width: 2.843rem; */
    width: 100%;
    height: 0.398rem;
    border-radius: 5px;
    border: none;
    border-bottom: 1px solid #d9d9d9;
    font-size: 0.13rem;
    outline: none;
}
.top {
    height: 0.384rem;
    width: 100%;
    display: flex;
    line-height: 1.5;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: #fff;
    border-bottom: 1px solid rgba(74, 74, 74, 0.1);
}
.img_fo {
    height: 0.203rem;
    width: 0.19rem;
    top: 0.1rem;
    /* top: 9px; */
    position: absolute;
    line-height: 1.5;
}
.fdj {
    height: 0.203rem;
    width: 0.203rem;
    left: 0.15rem;
}
.logo {
    width: 0.704rem;
}
.fenxiang {
    right: 20px;
}
</style>
